<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <h1>留言板</h1>
        <ul>
            <li v-for='(item,index) in list'>
                <span>{{index+1}}</span>
                <span>{{item.title}}</span>
                <button @click='del(index)'>删除</button>
                <button @click='amend(item,index)'>修改</button>
                <button @click="good(item,index)">点赞:{{item.like?item.like:0}}</button>
            </li>
        </ul>
        <input type="text" placeholder="输入留言信息" @keyup.enter='add' v-model='text'>
        <button @click='add'>提交</button>
    </div>



    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                sum: 0,
                list: [
                    { title: "Vue 如何?" },
                    { title: "React  很简单 ?" },
                    { title: "小程序很无聊" },
                    { title: "原生是 基础哦 " }
                ],
                text: ''
            },
            methods: {
                del(index) {
                    this.list.splice(index, 1)
                },
                add() {
                    this.list.push({title:this.text})
                },
                good(item, index) {
                    let like = item.like ? item.like : 0
                    item.like = like + 1
                    this.list.splice(index, 1, item)
                    console.log(item.like)
                    // this.list.splice(index,1,{...item,like:item.like?item.like+1:0+1})
                },
                amend(item, index) {
                    var value = window.prompt(index, item.title)
                    console.log(value)
                    if (value) {
                        item.title = value;
                        this.list.splice(index, 1, item)  // 替换修改 
                    }
                }
            }
        })
    </script>
</body>

</html>